<template>
	<div>
		<div class="order-status-bar font_size16 mt5 mb10">
			<div class="order-status-cell">
				<div class="status-item" :style="srtStyle">
					<span>订单号：</span>
					<span>{{ detailDataInfo.no || '-' }}</span>
				</div>
				<div class="status-item" :style="srtStyle">
					<span>订单状态：</span>
					<span>{{ detailDataInfo.status_act && detailDataInfo.status_act.status_txt || '-' }}</span>
				</div>
				<div class="status-item" :style="srtStyle">
					<span>库存状态：</span>
					<span>{{ detailDataInfo.status_act && detailDataInfo.status_act.status_send_txt || '-' }}</span>
				</div>
				<div class="status-item flex_between" style="width: 100%;" v-if="tabType != 'transfer_warehouse'">
					<div class="flex1">
						<span>仓库：</span>
						<span>{{ detailDataInfo.store || '--' }} </span>
					</div>
					<div class="font_size14" v-if="detailData && detailData.status_send != 3">
						<el-dropdown trigger="click" @command="selectStore">
							<span class="el-dropdown-link cursor_pointer font_bule bold font_size14">
								选择仓库 {{ storeList.length }}
								<i class="el-icon-arrow-down el-icon--right" color="#3388ff"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-for="item in storeList" :key="item.id" :command="item">
									{{ item.name }}
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
				<div class="status-item font_size14 bold" style="width: 100%;" v-if="tabType == 'transfer_warehouse'">
					<span>调拨：</span>
					<span> {{ detailDataInfo.store || '--' }} </span>
					<span class="ml5 mr5"> => </span>
					<span> {{ detailDataInfo.store2 || '--' }} </span>
				</div>
			</div>
			<div v-if="tabType != 'transfer_warehouse'">
				<div v-if="basicInfo" class="mt5 flex_row">
					<div v-if="basicInfo.company" class="mr30">
						<span>收货单位：</span>
						<span class="mr20" v-if="basicInfo.company">{{ basicInfo.company }}</span>
					</div>
					<div>
						<span>客户信息：</span>
						<span class="mr10" v-if="basicInfo.name">{{ basicInfo.name }}</span>
						<span class="mr10" v-if="basicInfo.cellphone">{{ basicInfo.cellphone }}</span>
						<span class="mr10">
							<span v-if="detailDataInfo.address && detailDataInfo.address.district">{{
								detailDataInfo.address.district }} </span>
							<span v-if="detailDataInfo.address && detailDataInfo.address.address">{{
								detailDataInfo.address.address
							}}</span>
						</span>
					</div>
				</div>
				<div v-if="!basicInfo" class="mt10 flex_row">
					<el-button type="primary" size="mini" icon="el-icon-plus" @click="addClick">添加{{ titleUnitName
					}}单位</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, getCurrentInstance, watch, computed, nextTick } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import staticConst from "@/js/const/StaticConst.js"; // 权限id 
const { proxy } = getCurrentInstance()

const props = defineProps({
	detailData: {
		type: Object,
		default: () => { }
	},
	basicInfo: {
		type: Object,
		default: () => { }
	},
	titleUnitName: {
		type: [String, Number],
		default: ''
	},
	tabType: {
		type: String,
		default: 'out_warehouse'
	},
	storeList: {
		type: Array,
		default: () => { }
	}
})

// tabType: 3个类型
// out_warehouse  出库单
// into_warehouse  入库单
// transfer_warehouse  调拨单

const srtStyle = computed(() => {
	return {
		flex: props?.tabType == 'transfer_warehouse' ? .5 : 1
	}
})

const detailDataInfo = ref({})
watch(() => props.detailData, (newVal) => {
	if (newVal) {
		detailDataInfo.value = { ...newVal } // 使用展开运算符创建新对象
	}
}, { immediate: true })

const emit = defineEmits(['addCompany', 'selectStore'])
const addClick = () => {
	emit('addCompany')
}

const selectStore = (item) => {
	detailDataInfo.value.store = item.name
	detailDataInfo.value.storeid = item.id
	emit('selectStore', item)
}


onMounted(() => { })

defineExpose({})

</script>

<style lang="scss" scoped>
.order-status-bar {
	padding: 16px 20px;
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

	.order-status-cell {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		align-items: stretch;
	}

	.status-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		padding: 12px 16px;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 8px;
		border: 1px solid rgba(203, 213, 225, 0.5);
		transition: all 0.3s ease;

		&:hover {
			background: rgba(255, 255, 255, 0.95);
			border-color: #3b82f6;
			box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
			transform: translateY(-1px);
		}

		span:first-child {
			font-size: 12px;
			color: #6b7280;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		span:last-child {
			font-size: 14px;
			color: #1f2937;
			font-weight: 600;
			text-align: center;
			word-break: break-word;
		}
	}
}
</style>